import { WeaTools } from 'ecCom';
import { WeaMessageCenter } from 'comsMobx';
import WeaLicense from '../wea-license';
import WeaVersion from '../wea-version';
import WeaFavourite from '../wea-favourite';
import WeaPlugin from '../wea-plugin';
import WeaSystemSetting from '../../wea-system-setting';
import './index.less';

class WeaPortalToolbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: [] };
  }

  componentWillMount() {
    WeaTools.callApi('/api/portal/toolbar/getToolbarMenu', 'GET', { menutype: 'front' }).then((result) => {
      this.setState({ data: result.data || [] });
    });
  }

  render() {
    const { className = '' } = this.props;
    const { data = [] } = this.state;

    return (
      <div className={`wea-portal-toolbar ${className}`}>
        <WeaLicense ecId={`${this && this.props && this.props.ecId || ''}_WeaLicense@1fbgxa`} ref="WeaLicense" />
        <WeaVersion ecId={`${this && this.props && this.props.ecId || ''}_WeaVersion@z3c0je`} ref="WeaVersion" />
        <WeaPlugin ecId={`${this && this.props && this.props.ecId || ''}_WeaPlugin@u1uktl`} ref="WeaPlugin" />
        <WeaSystemSetting ecId={`${this && this.props && this.props.ecId || ''}_WeaSystemSetting@woxf5p`} ref="WeaSystemSetting" />

        {data.map((item, index) => {
          const { type, name, icon } = item;

          if (type == 'message') {
            return (
              <div key={index} className="wea-portal-toolbar-item" title={name}>
                <WeaMessageCenter.DialogComponent ecId={`${this && this.props && this.props.ecId || ''}_WeaMessageCenter.DialogComponent@uyeqio`}
                  iconClass={icon}
                  iconStyle={{
                    fontSize: '18px',
                    position: 'absolute',
                    top: '50%',
                    left: '50%',
                    marginTop: '-9px',
                    marginLeft: '-9px',
                  }}
                />
              </div>
            );
          } else if (type == 'fav') {
            return (
              <div key={index} className="wea-portal-toolbar-item" title={name}>
                <WeaFavourite ecId={`${this && this.props && this.props.ecId || ''}_WeaFavourite@ruidwo`}>
                  <i className={`wea-portal-toolbar-icon ${icon}`} />
                </WeaFavourite>
              </div>
            );
          }
            return (
              <div key={index} className="wea-portal-toolbar-item" title={name} onClick={() => this.onOpen(item)}>
                <i className={`wea-portal-toolbar-icon ${icon}`} />
              </div>
            );
        })}
      </div>
    );
  }

  onOpen = (item) => {
    const { id, name, url, icon, mobxrouteurl, opentype, width = 800, height = 500 } = item;
    if (opentype == '1') {
      const obj = { 3: 'WeaPlugin', 5: 'WeaLicense', 6: 'WeaVersion', 8: 'WeaSystemSetting' };
      const ref = obj[id];
      if (ref) {
        this.refs[ref].onShow();
      } else {
        const dialog = WeaTools.createDialog({
          title: name,
          url,
          icon,
          iconBgcolor: '#1a57a0',
          style: { width, height },
          parentClassName: 'wea-portal-toolbar-dialog',
        });
        dialog.show();
      }
    } else if (this.props.onOpen) {
        const obj = { url, mobxrouteurl, target: opentype == '0' ? '_blank' : 'mainFrame' };
        this.props.onOpen(obj);
      } else {
        window.open(url);
      }
  };
}

export default WeaPortalToolbar;
